<!DOCTYPE html>
<html>
<head>
  <title>Wire-Pod Setup</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://kit.fontawesome.com/8cdc8cbed9.js" crossorigin="anonymous"></script>
</head>

<body>
  <div id="outer">
    <div id="content" class="">
    <h1>Wire-Pod Setup</h1>
    <hr>
    <div class="main-nav-parent">
      <div class="main-nav-child"><a href="index.html"><i class="fa-solid fa-reply"></i><br/>Back</a></div>
      <div class="main-nav-child"><a href="#" onclick="showWeather(); return false;"><i class="fa solid fa-cloud-sun" id="icon-Weather" name="icon"></i><br/>Weather</a></div>
      <div class="main-nav-child"><a href="#" onclick="showKG(); return false;"><i class="fa solid fa-diagram-project"id="icon-KG" name="icon"></i><br/>Knowledge Graph</a></div>
      <div class="main-nav-child"><a href="#" onclick="showLanguage(); return false;"><i class="fa-solid fa-language" id="icon-Language" name="icon"></i><br/>Set Language</a></div>
      <!--<div class="main-nav-child"><a href="#" onclick="showRestart(); return false;"><i class="fa solid fa-arrow-rotate-right" id="icon-Restart" name="icon"></i><br/>Restart Wire-Pod</a></div> -->
    </div>
    <hr>

    <div id="section-weather" style="display:none">
      <h3>Weather API Setup</h3>
      <div>
        <p>Set the weather provider you want to use</p>
        <p>
          <div id="addWeatherProviderAPI"></div>
          <form id="weatherAPIAddForm">
            <label for="weatherProvider">Weather API Provider:</label>
            <select name="weatherProvider" id="weatherProvider" form="weatherAPIAddForm" onchange="checkWeather()">
              <option value="" selected>None</option>
              <option value="openweathermap.org">OpenWeatherMap (free, with forecast support)</option>
              <option value="weatherapi.com">WeatherAPI</option>
            </select><br>
            <span id="apiKeySpan" style="display:none">
              <label for="apiKey">Weather API Key:</label>
              <input type="text" name="apiKey" id="apiKey"><br>
            </span>
          </form>
	  <div class="center">
            <button onclick="sendWeatherAPIKey()">Save</button>
          </div>
        </p>
        <div id="addWeatherProviderAPIStatus"></div>
        <hr>
      </div>
    </div>

    <div id="section-kg" style="display:none">
      <h3>Knowledge Graph Setup</h3>
      <div>
        <p>Set the Knowledge Graph Provider you want to use</p>
        <p>
          <div id="addKGProviderAPI"></div>
          <form id="kgAPIAddForm">
            <label for="kgProvider">Knowledge Graph API Provider:</label>
            <select name="kgProvider" id="kgProvider" form="kgAPIAddForm" onchange="checkKG()">
              <option value="" selected>None</option>
              <option value="openai">OpenAI</option>
              <option value="houndify">Houndify</option>
              <option value="together">Together</option>
            </select><br>
            <span id="houndifyInput" style="display:none">
              <small>To use Houndify, create an account at <a href=https://www.houndify.com/signup>houndify.com</a>, create a free domain, and enter the Client ID and Key here.</small><br>
              <label for="houndID">Knowledge Graph Client ID:</label>
              <input type="text" name="houndID" id="houndID"><br>
              <label for="houndKey">Knowledge Graph Client Key:</label>
              <input type="text" name="houndKey" id="houndKey"><br>
            </span>
            <span id="togetherInput" style="display:none">
              <small>To use Together, create an account at <a href="https://www.together.xyz">together.com</a>, create a free domain, and enter the Model Name and Together Key here.</small><br>
              <label for="togetherModel">Together Model Name: e.g. togethercomputer/llama-2-7b-chat</label>
              <input type="text" name="togetherModel" id="togetherModel"><br>
              <label for="togetherKey">Together Key:</label>
              <input type="text" name="togetherKey" id="togetherKey"><br>
            </span>
            <span id="openAIInput" style="display:none">
              <label for="openAIKey">Knowledge Graph API Key:</label>
              <input type="text" name="openAIKey" id="openAIKey"><br>
              <small>Would you like to enable the intent graph feature? This forwards the request to OpenAI if the regular intent processor didn't understand what you said.</small><br>
              <label for="intentyes">Yes</label>
              <input type="radio" id="intentyes" name="intentgselect" value="yes" onclick="checkKG()"><br>
              <label for="intentno">No</label>
              <input type="radio" id="intentno" name="intentgselect" value="no" onclick="checkKG()">
              <span id="openAIRobotNameInput" style="display:none">
                <br>
                <label for="openAIRobotName">Robot name:</label>
                <input type="text" name="openAIRobotName" id="openAIRobotName" placeholder="Anki Vector">
              </span>
            </span>
          </form>
	  <div class="center">
            <button onclick="sendKGAPIKey()">Save</button>
          </div>
        </p>
        <div id="addKGProviderAPIStatus"></div>
        <hr>
      </div>
    </div>

    <div id="section-stt" style="display:none">
      <h3>Speech-To-Text Language</h3>
      <div>
        <p>Set the STT language you want to use. Works only with VOSK as STT provider.</p>
        <p>
          <form id="sttAddForm">
            <label for="sttLanguage">STT Language:</label>
            <select name="sttLanguage" id="sttLanguage" form="sttAddForm">
              <option value="en-US">US English</option>
              <option value="it-IT">Italian</option>
              <option value="es-ES">Spanish</option>
              <option value="fr-FR">French</option>
              <option value="de-DE">German</option>
              <option value="pt-BR">Portuguese</option>
              <option value="pl-PL">Polish</option>
              <option value="pl-PL">Chinese</option>              
            </select><br>
          </form>
	  <div class="center">
            <button onclick="sendSTTLanguage()">Save</button>
          </div>
        </p>
        <div id="addSTTStatus"></div>
        <hr>
      </div>
    </div>

    <div id="section-restart" style="display:none">
      <h3>Restart Wire-Pod</h3>
      <div>
        <p>Restart Wire-Pod to apply the initial setup settings immediately</p>
        <p>
          <div id="restart"></div>
	  <div class="center">
            <button onclick="sendRestart()">Restart Wire-Pod</button>
          </div>
        </p>
        <div id="restartStatus"></div>
        <hr>
      </div>
    </div>

    <div id="section-language" style="display: none;">
      <h2>STT Language</h2>
      <div class="center" id="languageStatus"></div>
      <div id="languageSelectionDiv">
        <div class="center">
         <select name="languageSelection" id="languageSelection">
            <option value="en-US">English (US)</option>
            <option value="it-IT">Italian (IT)</option>
            <option value="es-ES">Spanish (ES)</option>
            <option value="fr-FR">French (FR)</option>
            <option value="de-DE">German (DE)</option>
            <option value="pt-BR">Portuguese (BR)</option>
            <option value="pl-PL">Polish (PL)</option>
            <option value="zh-CN">Chinese (CN)</option>            
          </select>
          </div>
          <div class="center">
          <button onclick="setSTTLanguage()" type="submit">Set Language</button>
          </div>
      </div>
      <hr>
    </div>

  </div>
</div>

</body>
<script src="./js/main.js"></script>
<script src="./sdkapp/js/main.js"></script>
<script>
    updateWeatherAPI();
    updateKGAPI();
</script>
</html>
